<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <!-- <div class="mui-card" v-for="item in goodslist" :key="item.id"> 
            <div class="mui-card-content">
                <div class="mui-card-content-inner goods-item">
                        开关
                    <mt-switch></mt-switch>
                    图片
                    <img src="item.thumb_path" alt="">
                    
                    <div class="info">
                            <h1>{{item.title}}</h1>
                            <div class="goodsinfo">
                                <span class="price">￥{{item.sell_price}}</span>
                                <nobox style="height:25px"></nobox>
                                <a href="#">删除</a>
                            </div>
                    </div>
                </div>
            </div>
            </div> -->
            <div class="mui-card"> 
            <div class="mui-card-content">
                <div class="mui-card-content-inner goods-item">
                        <!-- 开关 -->
                    <!-- <mt-switch v-model="selectedObj[item.id]" @change="changeSelect(item.id,selectedObj[item.id])"></mt-switch> -->
                    <mt-switch></mt-switch>
                    <!-- 图片 -->
                    <img src="../../imgs/menu1.png" alt="">
                    <!--  -->
                    <div class="info">
                            <h1>小米（MI）小米Note 16G双网通版</h1>
                            <div class="goodsinfo">
                                <span class="price">￥2199</span>
                                <!--countObj[item.id]表示这条商品对应的数量  -->
                                <!-- <nobox :initcount='countObj[item.id]'  :id=item.id style="height:25px"></nobox> -->
                                <nobox style="height:25px"></nobox>
                                <!-- <a href="#" @click.prevent="del(item.id)">删除</a> -->
                                <a href="#">删除</a>
                            </div>
                    </div>
                </div>
            </div>
            </div>

            <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                   <div class="left">
                       <p>总计（不含运费）</p>
                       <p>已勾选商品<span class="sum">{{selectedCount}}</span>件，总价<span class="sum">￥{{amount}}</span> </p>
                   </div>
                   
                   <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex'
import nobox from '../sub-components/shopcart-nobox.vue'
export default {
    data() {
        return {
           goodslist:[]//商品列表 
        }
    },
    methods: {
       async getGoodsList(){
           if(this.idStr.length<=0)return
           const {data}=await this.$http.get('/api/goods/getshopcarlist/'+this.idStr)
           if(data.status===0) return(this.goodslist=data.message)
        },
        del(id){
            删除商品
            this.goodslist.some((item,i)=>{
                if(item.id==id){
                    this.goodslist.splice(i,1)
                    return true
                }
            })
            // 从vuex中删除数据
            this.delForemCart(id)
        },
        changeSelect(id,select){
            // 更改开关的状态
            this.changeSelectState({id,selected:select})
        },
        ...mapMutations(['delForemCart','changeSelectState'])
    },
    components:{
        nobox
    },
    computed:{
        ...mapGetters(['idStr','countObj','selectedObj','selectedCount','amount'])
    },
    created() {
        this.getGoodsList()
    },
}
</script>

<style lang="less" scoped>
    
    .shopcar-container{
        overflow: hidden;
        background-color: #ccc;
    }
    .goods-item{
        display: flex;
        // justify-content: space-around;
        img{
            width: 60px;
            height: 60px;
        }
        h1{
            font-size: 13px;
        }
        .info{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .goodsinfo{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .price{
                color: red;
                font-weight: bold;
                font-size: 16px;
            }
        }      
    }
    .sum{
                color: red;
                font-weight: bold;
                font-size: 16px;
        }
        .jiesuan{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
</style>